<template>
  <div>
     <!-- 面包屑导航 -->
   <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/order/overview' }">
        <i class="el-icon-tickets"></i> 
        订单管理
      </el-breadcrumb-item>
      <!-- 当前 -->
      <el-breadcrumb-item>订单状态</el-breadcrumb-item>
    </el-breadcrumb>
     <template>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="item.txt" :name="item.name" v-for="(item,index) in active" :key="index" >
           <div>
            <table>
              <tr>
                <td>商品</td>
                <td>买家</td>
                <td>支付/配送</td>
                <td>价格</td>
                <td>操作</td>
                <td>状态</td>
              </tr>
              <div v-for="item in (list.slice((currentPage-1)*pageSize,currentPage*pageSize))" :key="item.id">
                <th><div style="display:inline;width:50px;height:20px;border:1px blue solid;padding:3px;color:blue;">{{item.specs}}</div>&nbsp;{{item.time}}&nbsp;<span>订单编号{{item.txt}}</span></th>
                <tr>
                  <td><img style="width:30px;height:40px" :src="item.img" alt="">&nbsp;&nbsp;&nbsp;<span>{{item.name}}</span>&nbsp;&nbsp;&nbsp;<span>{{item.pice}}</span></td>
                  <td>{{item.user}}<br/>{{item.id}}</td>
                  <td>{{item.zhifu}}<br/>{{item.shouhuo}}</td>
                  <td>{{item.fukuan}}</td>
                  <td><span @click="Detail(item.id)">查看详情</span></td>
                  <td>{{item.huo}}</td>
                </tr>
              </div>
             
            </table>
          <footer>
              <div style="width: 5%;"></div>
              <div id="fen">
                  <div>第{{currentPage}}页&nbsp;共{{Math.ceil( total/pageSize) }}页&nbsp;共{{list.length}}条</div>
                  <div>
                      <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[1, 2, 3, 4 , 5]"
                        :page-size="pageSize"
                        layout=" prev, pager, sizes, next, jumper"
                        :total='total'>
                      </el-pagination>
                  </div>
              </div>
            </footer>
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>
   
   
  </div>
</template>
<script>
import { getzwyStatusList } from '@/utils/api';
export default{
  data(){
    return {
      activeName: 'first',
      list:[],
      currentPage: 1,
      list:[],
      pageSize:5,
      total:0,
      state:[],
      active:[{name:"first",txt:"全部订单"},{name:"second",txt:"代发货"},{name:"third",txt:"待收货"},{name:"fourth",txt:"待付款"},{name:"fitex",txt:"已完成"},{name:"fouh",txt:"已关闭"},]
    }
  },
  methods:{
    handleClick(tab, event) {
      console.log(tab.label);
      console.log(tab, event);
      if(tab.label!="全部订单"){
        this.list = this.state.filter(item=>item.huo==tab.label)
        this.total = this.list.length
      }else{
        this.list=this.state
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      console.log(`每页 ${val} 条`);
    },
     handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`);
    },
    tiao(val){
      this.pageSize=Number(val)
    },
    Detail(val){
      this.$router.push('/order/status/detail/'+val)
    },
  },
  created() {
    getzwyStatusList().then((res) => {
      this.list = res.data.data
      this.state = res.data.data
      this.total = res.data.data.length
    });
  },
}
</script>
<style scoped>
footer{
  width: 100%;
  height: 55px;
  display: flex;
}
#fen{
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
table{
  width: 100vw;
  display: flex;
  flex-direction: column;
}
tr{
  width: 100%;
  display: flex;
}
td{
  width:13%;
  text-align: center;
}
th{
  width: 100%;
  height: 50px;
  line-height: 50px;
}
img{
  display:inline;
}
</style>